
<template>
  <MyVanskeleton :loading="skeletonLoading">
    <template v-slot:my-content>
      <div class="company-style">
        <!-- 导航栏 start -->
        <van-nav-bar title="选择展示职位" fixed left-arrow @click-left="$router.back()" />
        <!-- 导航栏 end -->

        <!-- 内容 start -->
        <div class="content-top jobs-index">
          <MyEmpty v-if="jobList.length == 0" />
          <van-list v-else class="list" @load="getJobList" :load="dataLoading" :finished="finished">
            <div class="item" v-for="item,index in jobList" :key="index">
              <div class="info">
                <div class="checkbox">
                  <van-checkbox v-model="item.isCheck" checked-color="#07f" @change="onChange"></van-checkbox>
                </div>
                <div class="left">
                  <b>{{item.jobName}}</b>
                  <p>
                    <small class="good" v-if="item.refreshFlag">今日已刷新</small>
                    <small class="bad" v-if="item.cqwwhFlag">长期未维护</small>
                  </p>
                  <p>
                    <span class="end">{{item.endDateStr}}</span>
                    <i></i>
                    <span class="look">{{item.clicks}}</span>
                  </p>
                </div>
              </div>
            </div>
          </van-list>
        </div>
        <!-- 内容 end -->

        <!-- 批量操作start -->
        <div class="jobs-share-btns">
          <p>
            <van-checkbox v-model="checkAllFlag" checked-color="#07f" @click="checkAll">全选</van-checkbox>
            <span>{{`(${checkedList.length}/${jobList.length})`}}</span>
          </p>
          <p>
            <van-button type="primary" text="选择模板" @click="onChooseTemplet"></van-button>
          </p>
        </div>
        <!-- end -->
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import { NavBar, List, Button, Checkbox, Toast } from "vant";
export default {
  name: "LivePlay",
  components: {
    [NavBar.name]: NavBar,
    [List.name]: List,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
  },
  // 定义属性
  data() {
    return {
      //loading
      loading: false,
      dataLoading: false,
      finished: false,
      skeletonLoading: true,
      //responseData
      jobList: [],//职位数据
      //check data
      checkAllFlag: false,
    };
  },
  computed: {
    checkedList() {
      return this.jobList.filter(item => item.isCheck);
    },
  },
  mounted() {
    this.skeletonLoading = false;
    this.getJobList();
  },
  // 方法集合
  methods: {
    getJobList() {
      this.dataLoading = true
      this.$api.get('/CompanyStation/GetStationList4Batch?jobState=1').then(res => {
        this.dataLoading = false;
        this.finished = true;
        if (res.success) {
          this.jobList = res.response;
        }
        else { Toast(res.msg); }
      })
    },
    onChange() {
      this.checkAllFlag = this.jobList.length == this.checkedList.length
    },
    checkAll() {
      this.jobList.forEach(item => {
        item.isCheck = this.checkAllFlag;
      });
    },
    onChooseTemplet() {
      if (this.checkedList.length == 0) { Toast('请至少选择一个岗位'); return; }
      else {
        let idArr = new Array();
        this.checkedList.forEach(item => {
          idArr.push(item.jobIDEncrypt);
        });
        this.$router.push({ name: 'company-poster-chooseTemplet', query: { jobIDs: idArr } })
      }
    }
  },
};
</script>

<style>
/* 岗位 - 分享操作*/
.company-style .jobs-share-btns {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  border-top: 0.5px solid #e8e8e8;
  background-color: #fff;
}

.company-style .jobs-share-btns p {
  display: flex;
  align-items: center;
}

.company-style .jobs-share-btns p button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 34px;
  padding: 0;
  border-color: #07f;
  border-radius: 3px;
  background-color: #07f;
  font-size: 15px;
  line-height: 1;
}
</style>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>